import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.2
import zy.qt.Http 1.2  //导入自定义包
import zy.qt.systemTrayIcon 1.3

Window {
    id: root;
    visible: true;  //可见
    width: 660;
    height: 520;
    objectName: "rootObject";
    title: qsTr("翻译");
    flags: Qt.FramelessWindowHint+Qt.Window;  //窗口无边框, 且依附于系统任务栏
    opacity: 20; //不透明度
    property var tmp_x;  //用于记录鼠标左键按下时的位置(也就是鼠标点位置与窗体的相对位置. 该位置不可变)
    property var tmp_y;
    property var rootX;     //记录当前的窗体位置(左上角点的位置, 该位置一直在变)
    property var rootY;

    property int btnTab: 0;      //用于记录当前标签
    My_Translaton {  //C++ 类的导出
        id: id_translation;
        property string from: "auto";  //源语言
        property string to: "auto";    //目标语言
        apiType: My_Translaton.ApiWordBadu;    //设置默认使用 百度词典API (因为启动第一页为词典)
    }
    MySystemTrayIcon {  //系统托盘区
        id: id_systemTrayIcon;
        onSig_actionMin: {
            root.showMinimized();
        }
        onSig_actionNormal: {
            root.showNormal();
        }
        onSig_actionQuit: Qt.quit();
    }
    Component { //下拉框风格
        id: id_comboBoxStyle;
        ComboBoxStyle {   //定制风格. 只需定制 下拉图标宽度, 背景, 文本
            //renderType: Text.QtRendering;   //设置renderType (一般不用设置)
            dropDownButtonWidth: 20;        //下拉图标的宽度
            background: Rectangle {  //定制背景
                id: background;
                anchors.fill: parent;
                implicitHeight: 24;
                radius: 4;     //设置圆角半径
                //边框宽度
                border.width: 1;
                //边框颜色 按下或鼠标经过为蓝色. 否则为灰色
                border.color: control.hovered ? (control.pressed ? "#838383": "#15A0F5") : "#CDCDCD";
                color: control.pressed ? "#DFDFDF" : "#EFEFEF";
                Image { //加载图片作为 下拉小图标
                    width: 16;
                    height: 18;
                    anchors.right: parent.right;
                    anchors.rightMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 3;
                    anchors.verticalCenter: parent.verticalCenter;
                    fillMode: Image.Stretch;    //填充模式为 拉伸
                    source: "qrc:/pic/down";  //URL
                }
            }
            label: Text {   //定制文本
                anchors.left: parent.left;
                anchors.leftMargin: 3;
                width: parent.width-22;
                height: parent.height;
                font.bold: true;
                verticalAlignment: Text.AlignVCenter;
                //                horizontalAlignment: Text.AlignHCenter;
                text: control.currentText;
                //                color: (control.hovered || control.pressed) ? "blue" : "black";
                color: control.pressed ? "#877F7F" : "#219BEE";
            }
        }
    }
    Component { //按钮风格 翻译按钮
        id: id_buttonStyle_translate;
        ButtonStyle {
            background: Rectangle {
                id: id_btnStyle_background;
                implicitWidth: 60
                implicitHeight: 25
                border.width: 0;    //无边框
                //                border.width: control.hovered ? 2 : 1
                //                border.color: control.hovered ?
                radius: 4
                color: control.hovered ? (control.pressed ? "#D4CDCD" : "#40B6FF"): "#15A0F5";
            }
            label: Text {   //定制文本
                verticalAlignment: Text.AlignVCenter;
                horizontalAlignment: Text.AlignHCenter;
                font.bold: true;
                text: control.text;
                color: control.pressed ? "#877F7F" : "white";
            }
        }
    }
    Component { //按钮风格 清除按钮
        id: id_buttonStyle_clear;
        ButtonStyle {
            background: Rectangle {
                id: id_btnStyle_background;
                implicitWidth: 60
                implicitHeight: 25
                radius: 4;
                border.width: control.hovered ? 2 : 1;
                border.color: control.hovered ? (control.pressed ? "#838383": "#15A0F5") : "#CDCDCD";
                color: control.pressed ? "#DFDFDF" : "#EFEFEF";
            }
            label: Text {   //定制文本
                verticalAlignment: Text.AlignVCenter;
                horizontalAlignment: Text.AlignHCenter;
                //                font.bold: true;
                text: control.text;
                color: control.hovered ? (control.pressed ? "#7F7B7B" : "#15A0F5"): "#666666";
            }
        }
    }
    Component { //按钮风格 上一个,下一个按钮
        id: id_buttonStyle_preNext;
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                radius: 20;
                border.width: control.hovered ? 2 : 1;
                border.color: control.hovered ? (control.pressed ? "#838383": "#15A0F5") : "#CDCDCD";
                color: control.pressed ? "#DFDFDF" : "#EFEFEF";
            }
        }
    }
    Component { //按钮风格  查词
        id: id_buttonStyle_search;
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 50;
                implicitHeight: implicitWidth;
                radius: implicitWidth/2;
                border.width: control.hovered ? 2 : 1;
                border.color: control.hovered ? (control.pressed ? "#838383": "#15A0F5") : "#CDCDCD";
                color: control.pressed ? "#DFDFDF" : "#F2F2F2";
                Image {
                    //                    fillMode: Image.Stretch;    //填充模式为 拉伸
                    source: "qrc:/pic/search";
                    anchors.verticalCenter: parent.verticalCenter;
                    anchors.horizontalCenter: parent.horizontalCenter;
                    anchors.margins: 3;
                    sourceSize.width: 35;
                    sourceSize.height: 35;
                }
            }

        }
    }
    Component { //按钮风格 Tab标签切换
        id: id_buttonStyle_tab;
        ButtonStyle {//颜色为顶部矩形的颜色
            background: Rectangle {
                border.width: 0;
                color: "#15A0F5";
                Rectangle { //用于显示是否有鼠标滑过, 选中的底部小矩形
                    anchors.bottom: parent.bottom;
                    width: parent.width;
                    height: 4;
                    border.width: 0;
                    color: "#2378B6";
                    visible: control.isPressed;
                }
            }
            label: Text {
                anchors.top: parent.top;
                anchors.topMargin: 14;
                anchors.left: parent.left;
                anchors.leftMargin: 30;
                font.bold: true;
                font.family: "宋体";
                font.pixelSize: 16
                color: control.hovered ? "#0ED7EA" : "white";
                text: control.text;
            }
        }
    }
    Component { //按钮风格 最小化,关闭按钮
        id: id_buttonStyle_min_close;
        ButtonStyle {
            background: Rectangle {
                border.width: 0;
                color: "#15A0F5";
            }
        }

    }
    Rectangle { //窗体 左边阴影
        id: id_mainShadow_left;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.topMargin: 1;
        width: 1;
        height: parent.height-anchors.topMargin;
        color: "#C8C8C8";
    }
    Rectangle { //窗体 左边阴影
        id: id_mainShadow_right;
        anchors.right: parent.right;
        anchors.top: parent.top;
        anchors.topMargin: 1;
        width: 1;
        height: parent.height-anchors.topMargin;
        color: "#C8C8C8";
    }
    Rectangle { //窗体 左边阴影
        id: id_mainShadow_top;
        anchors.left: parent.left;
        anchors.top: parent.top;
        width: parent.width;
        height: 1;
        color: "#C8C8C8";
    }
    Rectangle { //窗体 左边阴影
        id: id_mainShadow_bottom;
        anchors.left: parent.left;
        anchors.bottom: parent.bottom;
        width: parent.width;
        height: 1;
        color: "#C8C8C8";
    }
    Rectangle { //顶部
        id: id_top;
        anchors.top: id_mainShadow_top.bottom;
        anchors.left: id_mainShadow_left.right;
        width: root.width - 2;
        height: 50;
        antialiasing: true; //反锯齿
        color: "#15A0F5";   //蓝色
        MouseArea { //在窗口上方放置一个可拖动区域
            anchors.fill: parent;
            onPressed: {
                if (mouse.buttons&Qt.LeftButton) { //每次鼠标左键按下时,保存一次数据
                    root.rootX = root.x;
                    root.rootY = root.y;
                    root.tmp_x = mouse.x;
                    root.tmp_y = mouse.y;
                }
            }
            onPositionChanged: {   //鼠标位置改变
                if (mouse.buttons&Qt.LeftButton) {  //左键按下
                    root.x = root.rootX - root.tmp_x + mouse.x;
                    root.y = root.rootY - root.tmp_y + mouse.y;
                    root.rootX = root.x;
                    root.rootY = root.y;
                }
            }
        }
        Image {
            id: id_icon;
            anchors.left: parent.left;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.leftMargin: 20;
            source: "qrc:/pic/icon";
            sourceSize.height: 40;
            sourceSize.width: 40;
        }
        Text {
            anchors.left: id_icon.right;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.leftMargin: 5;
            text: "Dictionary";
            font.family: "Consolas";
            font.pixelSize: 22;
            font.bold: true;
            color: "white";
        }

        Button { //Tab切换按钮 查词
            id: btn_tab1;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.left: parent.left;
            anchors.leftMargin: parent.width/2 - 60;
            anchors.top: parent.top;
            anchors.topMargin: 1;
            width: 100;
            text: qsTr("词典");
            style: id_buttonStyle_tab;
            property bool isPressed: true;  //程序启动后的画面为 词典
            onClicked: {
                root.btnTab = 0;
                isPressed = true;
                btn_tab2.isPressed = false;
            }
        }
        Button { //Tab切换按钮 翻译
            id: btn_tab2;
            anchors.verticalCenter: btn_tab1.verticalCenter;
            anchors.left: btn_tab1.right;
            anchors.leftMargin: 0;
            anchors.top: btn_tab1.top;
            width: btn_tab1.width;
            text: qsTr("翻译");
            property bool isPressed: false;
            style: id_buttonStyle_tab;
            onClicked: {
                root.btnTab = 1;
                isPressed = true;
                btn_tab1.isPressed = false;
            }
        }
        MessageDialog { //是否关闭对话框
            id: id_closeMsgDlg;
            title: "提示";
            text: "你确定要退出本程序吗?\nYes: 直接退出本程序.\nNo: 最小化到系统托盘.";
            standardButtons: StandardButton.Yes | StandardButton.No;
            visible: false; //先不可见
            onYes: {
                root.close();
            }
            onNo: {
                id_systemTrayIcon.setIcon(":/pic/icon");
                id_systemTrayIcon.setToolTip("点这里~");
                id_systemTrayIcon.show();
                root.showMinimized();
            }
        }
        MessageDialog { //是否关闭对话框
            id: id_infoMsgDlg;
            title: "帮助";
            text: "词典页面: \n\t使用左右方向键查找上一个,下一个历史记录.\n\t使用ESC键清空输入框内容.\n\t使用Enter键查询当前输入.\n翻译页面: \n\t使用ESC键清除.\n\tCtrl+t快速翻译.\n\t可切换翻译API.";
            detailedText: "本程序使用QML编写界面, C++实现逻辑.\n作者: zhaoyongCNSX\n使用请遵循GPL.";
            standardButtons: StandardButton.Yes;
            visible: false; //先不可见
            onYes: {
                id_infoMsgDlg.visible = false;
            }
        }
        Button {    //关闭程序按钮
            id: btn_exit;
            anchors.right: parent.right;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.rightMargin: 10;
            width: 20;
            height: width;
            tooltip: qsTr("退出");
            style: id_buttonStyle_min_close;
            opacity: hovered ? (pressed ? 1 : 0.8) : 0.4;   //不透明度
            iconSource: "qrc:/pic/close";
            onClicked: { //单击了关闭按钮, 显示是否关闭对话框
                id_closeMsgDlg.visible = true;
            }
        }
        Button {    //最小化按钮
            id: btn_Min;
            anchors.top: btn_exit.top;
            anchors.right: btn_exit.left;
            anchors.rightMargin: 6;
            width: btn_exit.width;
            height: btn_exit.height;
            tooltip: qsTr("最小化");
            style: id_buttonStyle_min_close;
            opacity: hovered ? (pressed ? 1 : 0.8) : 0.4; //不透明度
            iconSource: "qrc:/pic/mini";
            onClicked: {
                root.showMinimized();   //窗口最小化函数
            }
        }
        Button { //显示帮助信息
            id: btn_help;
            anchors.top: btn_exit.top;
            anchors.right: btn_Min.left;
            anchors.rightMargin: 9;
            width: 20;
            height: width;
            tooltip: qsTr("帮助");
            style: id_buttonStyle_min_close;
            opacity: hovered ? (pressed ? 1 : 0.8) : 0.4;
            iconSource: "qrc:/pic/info";        //----------
            onClicked: {
                id_infoMsgDlg.visible = true;
            }
        }
    }
    TabView {   //标签视图
        id: id_tabView;
        anchors.top: id_top.bottom;
        anchors.left: parent.left;
        anchors.topMargin: 1;
        anchors.leftMargin: 1;
        antialiasing: true; //反锯齿
        width: root.width - anchors.leftMargin*2;
        height: root.height - id_top.height - 3;
        tabsVisible: false;  //标签栏是否可见
        tabPosition: Qt.TopEdge;  //标签位置 Qt.TopEdge 顶部 Qt.BottomEdge 底部
        frameVisible: false; //边框是否可见
        currentIndex: root.btnTab;
        Tab {
            title: qsTr("词典");
            component: id_word;
        }
        Tab {
            title: qsTr("翻译");
            //            source: "qrc:/Translate.qml";
            component: id_translate;
        }
        onCurrentIndexChanged: {
            console.log("currnetIndex: ", currentIndex);
            switch (currentIndex) {
            case 0: //词典
                id_translation.apiType = My_Translaton.ApiWordBadu;
                break;
            case 1: //翻译
                id_translation.apiType = My_Translaton.ApiBaidu;
                break;
            }
        }
    }
    Component {     //翻译
        id: id_translate;
        Rectangle { //背景 灰色
            anchors.fill: parent;
            color: "#F2F2F2";
            border.width: 0;
            Rectangle { //前景 白色
                id: id_foreground;
                anchors.fill: parent;
                anchors.topMargin: 25;
                anchors.leftMargin: 20;
                anchors.rightMargin: anchors.leftMargin;
                anchors.bottomMargin: 10;
                width: parent.width-anchors.leftMargin*2;
                border.width: 0;
                color: "#FCFCFC"
                Rectangle { //左边界
                    id: id_magin_left;
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.topMargin: 1;
                    width:2;
                    height: parent.height-3;
                    color: "#CECECE";
                }
                Rectangle { //右边界
                    id: id_magin_right;
                    anchors.right: parent.right;
                    width:2;
                    height: id_magin_left.height;
                    color: "#CECECE";
                }
                Rectangle { //上边界
                    anchors.top: parent.top;
                    height: 0;
                    width: parent.width;
                    color: "#CECECE";
                }
                Rectangle { //下边界
                    anchors.bottom: parent.bottom;
                    height: 1;
                    width: parent.width;
                    color: "#CECECE";
                }
                Text {
                    id: id_text_yuanwen;
                    anchors.top: id_foreground.top;
                    anchors.left: id_src.left;
                    anchors.topMargin: 25;
                    font.pixelSize: 15
                    height: 15;
                    color: "#999999";
                    text: qsTr("原文");
                }
                Text {
                    id: id_text_yiwen;
                    anchors.top: id_buttonGrop.bottom;
                    anchors.left: id_src.left;
                    anchors.topMargin: 20;
                    font.pixelSize: 15
                    height: id_text_yuanwen.height;
                    color: id_text_yuanwen.color;
                    text: qsTr("译文");
                }

                TextEdit {  //原文输入
                    id: id_src;
                    anchors.left: parent.left;
                    anchors.top: id_text_yuanwen.bottom;
                    anchors.leftMargin: 30;
                    anchors.topMargin: 20;
                    width: parent.width - anchors.leftMargin*2;
                    height: (parent.height - anchors.topMargin*2 - id_text_yuanwen.height*2 - 55 - id_buttonGrop.height) / 2;
                    text: "";
                    selectByMouse: true;    //允许使用鼠标选择文本
                    selectedTextColor: "#FCFCFC";   //选中文本的颜色
                    selectionColor: "#15A0F5";
                    font.pixelSize: 14
                    font.family: "Consolas";
                    wrapMode: TextEdit.Wrap;
                    Keys.onEscapePressed: { //按下 ESC键
                        id_src.text = "";
                        id_dst.text = "";
                    }
                    Keys.onPressed: {
                        if ((event.key === Qt.Key_T) && (event.modifiers &Qt.ControlModifier)) {
                            translation();
                        }
                    }
                }
                TextEdit {  //译文输出
                    id: id_dst;
                    anchors.left: id_src.left;
                    anchors.top: id_text_yiwen.bottom;
                    anchors.topMargin: id_src.anchors.topMargin;
                    width: id_src.width;
                    height: id_src.height;
                    readOnly:  true; //只读
                    selectByMouse: true;    //允许使用鼠标选择文本
                    selectedTextColor: id_src.selectedTextColor;
                    selectionColor: id_src.selectionColor;
                    font.pixelSize: 14;
                    font.family: "Consolas";
                    wrapMode: TextEdit.Wrap;
                }
                Rectangle { //按钮组
                    id: id_buttonGrop;
                    anchors.left: id_src.left;
                    anchors.top: id_src.bottom;
                    anchors.leftMargin: 2;
                    //anchors.topMargin: id_src.anchors.topMargin/2;
                    width: id_src.width - anchors.leftMargin*2;
                    height: 50;
                    color: parent.color;
                    Rectangle { //按钮组 底部灰色线
                        id: id_btnGropMargen_bottom;
                        anchors.left: parent.left;
                        anchors.bottom: parent.bottom;
                        height: 1;
                        width: 300;
                        color: "#E6E6E6";
                    }
                    Rectangle {
                        id: id_btnGropMargen_top;
                        anchors.right: parent.right;
                        anchors.top: parent.top;
                        height: 1;
                        width: parent.width-id_btnGropMargen_bottom.width;
                        color: id_btnGropMargen_bottom.color;
                    }

                    ListModel {  //添加的元素
                        id: id_LM_nowTrans;
                        ListElement { text:"自动检测"; value: "auto"}
                        ListElement { text:"汉语"; value: "zh"}
                        ListElement { text:"英语"; value: "en"}
                    }
                    ListModel {
                        id: id_LM_baiduTrans;
                        ListElement { text:"自动检测"; value: "auto"}
                        ListElement { text:"汉语"; value: "zh"}
                        ListElement { text:"英语"; value: "en"}
                        ListElement { text:"日语"; value: "jp"}
                        ListElement { text:"韩语"; value: "kor"}
                        ListElement { text:"粤语"; value: "yue"}
                        ListElement { text:"文言文"; value: "wyw"}
                        ListElement { text:"德语"; value: "de"}
                    }
                    Text {
                        id: id_text_src;
                        anchors.left: parent.left;
                        anchors.leftMargin: 5;
                        anchors.verticalCenter: parent.verticalCenter;
                        text: "源语言:";
                    }
                    ComboBox {  //源语言下拉选择框
                        id: idCobBox_from;
                        anchors.left: id_text_src.right;
                        anchors.leftMargin: 5;
                        anchors.verticalCenter: parent.verticalCenter;
                        model: id_LM_baiduTrans;
                        style: id_comboBoxStyle;
                        width: 80;
                        onActivated: {
                            //console.log(listData.get(index).text, listData.get(index).value);
                            switch (id_translation.apiType) {
                            case My_Translaton.ApiNow:
                                id_translation.from = id_LM_nowTrans.get(index).value;
                                break;
                            case My_Translaton.ApiBaidu:
                                id_translation.from = id_LM_baiduTrans.get(index).value;
                                break;
                            }
                        }
                    }
                    Text {
                        id: id_text_dst;
                        anchors.left: idCobBox_from.right;
                        anchors.leftMargin: idCobBox_from.anchors.leftMargin;
                        anchors.verticalCenter: parent.verticalCenter;
                        //                        width: id_text_src.width;
                        text: "目标语言:";
                    }

                    ComboBox {  //目标语言下拉选择框
                        id: idCobBox_to;
                        anchors.left: id_text_dst.right;
                        anchors.leftMargin: idCobBox_from.anchors.leftMargin;
                        anchors.verticalCenter: parent.verticalCenter;
                        width: idCobBox_from.width;
                        model: idCobBox_from.model;
                        style: id_comboBoxStyle;
                        onActivated: {
                            //console.log(listData.get(index).text, listData.get(index).value);
                            switch (id_translation.apiType) {
                            case My_Translaton.ApiNow:
                                id_translation.to = id_LM_nowTrans.get(index).value;
                                break;
                            case My_Translaton.ApiBaidu:
                                id_translation.to = id_LM_baiduTrans.get(index).value;
                                break;
                            }
                        }
                    }
                    Button {    //翻译按钮
                        id: idBtn_translation;
                        anchors.left: idCobBox_to.right;
                        anchors.leftMargin: 40;
                        anchors.verticalCenter: parent.verticalCenter;
                        text: qsTr("翻译");
                        style: id_buttonStyle_translate;
                        onClicked: {
                            translation();
                        }
                    }
                    Button {    //清除按钮
                        id: idBtn_clear;
                        anchors.left: idBtn_translation.right;
                        anchors.leftMargin: idCobBox_from.anchors.leftMargin;
                        anchors.verticalCenter: parent.verticalCenter;
                        text: qsTr("清空");
                        style: id_buttonStyle_clear;
                        onClicked: {
                            id_src.text = "";
                            id_dst.text = "";
                        }
                    }

                    ComboBox {  //翻译 API 下拉选择框
                        id: idCobBox_apiType;
                        anchors.right: parent.right;
                        anchors.rightMargin: 10;
                        anchors.verticalCenter: parent.verticalCenter;
                        width: idCobBox_from.width;
                        model: ListModel {  //添加的元素
                            id: listApiType;
                            ListElement { text:"百度翻译"; value: My_Translaton.ApiBaidu}
                            ListElement { text:"即时翻译"; value: My_Translaton.ApiNow}
                        }
                        textRole: "text";   //设定显示 "text" 段
                        style: id_comboBoxStyle;
                        onActivated: {
                            console.log(listApiType.get(index).value);
                            id_translation.apiType = listApiType.get(index).value;
                            switch (index) {
                            case 0:
                                idCobBox_from.model = id_LM_baiduTrans;

                                break;
                            case 1:
                                idCobBox_from.model = id_LM_nowTrans;
                                break;
                            }
                        }
                    }
                }
            }
            function translation() {
                // e3a55997d35c1164304c93f780bfc357
                //  uXoindbgL9Hf3HkfWfHOTtz8
                // http://apis.baidu.com/apistore/tranlateservice/translate //即时翻译
                // http://openapi.baidu.com/public/2.0/bmt/translate        //百度翻译
                var apikey, url;
                switch (id_translation.apiType) {
                case My_Translaton.ApiNow:
                    apikey = "e3a55997d35c1164304c93f780bfc357";
                    url = "http://apis.baidu.com/apistore/tranlateservice/translate";
                    break;
                case My_Translaton.ApiBaidu:
                    apikey = "uXoindbgL9Hf3HkfWfHOTtz8";
                    url = "http://openapi.baidu.com/public/2.0/bmt/translate";
                    break;
                }
                id_translation.setApiKey(apikey);   //设置 ApiKey
                id_translation.setUrl(url); //设置 URL
                console.log(id_src.text, id_translation.from, id_translation.to);
                id_translation.setRequest(id_src.text, id_translation.from, id_translation.to);
            }

            Connections {
                target: id_translation;
                onSig_destMsg: {
                    id_dst.text = str;
                }
            }
        }
    }
    Component {     //词典
        id: id_word;
        Rectangle {
            anchors.fill: parent;
            color: "#F2F2F2";
            Rectangle { //查询框 和 查询按钮
                id: id_word_search;
                anchors.left: parent.left;
                anchors.top: parent.top;
                anchors.topMargin: 10;
                anchors.leftMargin: 10;
                color: "#F2F2F2";
                width: parent.width - anchors.leftMargin*2;
                height: 60;
                Button {
                    id: id_btnWord_previous;
                    anchors.left: parent.left;
                    anchors.verticalCenter: parent.verticalCenter;
                    anchors.leftMargin: 20;
                    //                    text: "上一个";
                    enabled: false;
                    opacity: enabled ? 1 : 0.3; //不透明度 不可用时半透明
                    iconSource: "qrc:/pic/left";
                    style: id_buttonStyle_preNext;
                    onClicked: searchPrev();
                }
                Button {
                    id: id_btnWord_next;
                    anchors.left: id_btnWord_previous.right;
                    anchors.verticalCenter: parent.verticalCenter;
                    anchors.leftMargin: 5;
                    //                    text: "下一个";
                    enabled: false;
                    opacity: enabled ? 1 : 0.3; //不透明度 不可用时半透明
                    iconSource: "qrc:/pic/right"
                    style: id_buttonStyle_preNext;
                    onClicked: searchNext();
                }
                ComboBox {  //输出要查找的单词
                    id: id_inputWord;
                    anchors.left: id_btnWord_next.right;
                    anchors.leftMargin: 20;
                    anchors.verticalCenter: parent.verticalCenter;
                    width: 400;
                    height: 30;
                    style: id_comboBoxStyle;
                    model: ListModel {
                        id: id_inputwordList;
                        ListElement { text: "清除搜索历史"; value: "0"; input: ""}
                    }
                    textRole: "input";
                    editable: true; //可编辑
                    onAccepted: { //按下了 Enter 键
                        search(editText);
                    }
                    onCurrentIndexChanged: { //当前索引改变
                        if (currentIndex == count-1) {
                            id_displaySearchWord.text = " ";
                            id_displayWordPh.text = " ";
                            id_outputWordMeans.text = " ";
                            id_inputwordList.clear();
                            id_inputwordList.append({ text: "清除搜索历史", value: "0", input : ""});
                            currentIndex = -1;
                            textRole = "input";
                        } else if (id_inputwordList.count > 1) {
                            id_displaySearchWord.text = currentText;
                            searchWord(currentText);
                        }

                        //设置 上一个 按钮是否可用
                        if ((id_inputwordList.count > 2) && (id_inputwordList.count - currentIndex > 2)) {
                            id_btnWord_previous.enabled = true;
                        } else {
                            id_btnWord_previous.enabled = false;
                        }
                        //设置 下一个 按钮是否可用
                        if ((currentIndex > 0) && (id_inputwordList.count > 2)) {
                            id_btnWord_next.enabled = true;
                        } else {
                            id_btnWord_next.enabled = false;
                        }
                    }
                    Keys.onEscapePressed: { //ESC 按下, 清除当前输入框中的字符
                        editText = "";
                    }
                    Keys.onLeftPressed: searchPrev(); //上箭头 按下, 上一个
                    Keys.onRightPressed: searchNext(); //下箭头 按下, 下一个
                }

                Button {
                    id: idBtn_searchWord;
                    anchors.left: id_inputWord.right;
                    anchors.leftMargin: 15;
                    anchors.verticalCenter: parent.verticalCenter;
                    //                    text: qsTr("查询");
                    //                    iconSource: "qrc:/pic/search";
                    style: id_buttonStyle_search;
                    onClicked: {
                        search(id_inputWord.editText);
                    }
                }
            }

            Rectangle { //显示区
                anchors.top: id_word_search.bottom;
                anchors.topMargin: 30;
                anchors.horizontalCenter: parent.horizontalCenter;
                height: 300;
                width: 500;
                Text { // 显示要查的词
                    id: id_displaySearchWord;
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.leftMargin: 30;
                    anchors.topMargin: 20;
                    width: parent.width - anchors.leftMargin*2;
                    height: 35;
                    text: id_inputWord.currentText;
                    font.pixelSize: 25
                    font.family: "微软雅黑";
                    //                    font.bold: true;
                    color: "#999696";
                }
                Text { //显示音标 (如果有的话)
                    id: id_displayWordPh;
                    anchors.left: parent.left;
                    anchors.top: id_displaySearchWord.bottom;
                    anchors.topMargin: 30;
                    anchors.leftMargin: 150;
                    width: parent.width - anchors.leftMargin*2;
                    height: 20;
                    color: "#888787";
                    font.pixelSize: 15
                    font.family: "宋体";
                }

                TextEdit { //显示 词
                    id: id_outputWordMeans;
                    anchors.horizontalCenter: parent.horizontalCenter;
                    anchors.top: id_displayWordPh.bottom;
                    anchors.topMargin: 10;
                    width: 300;
                    height: 200;
                    font.pixelSize: 15
                    font.family: "微软雅黑";
                    color: "#626262";
                    wrapMode: TextEdit.WordWrap;    //换行
                }
            }
            function searchPrev() { //前一个
                if (id_inputWord.currentIndex < id_inputwordList.count-2) {
                    id_inputWord.currentIndex++;
                }
            }
            function searchNext() { //后一个
                if (id_inputWord.currentIndex > 0) {
                    id_inputWord.currentIndex--;
                }
            }
            function search(editWrod) { //根据 ComboBox的editWord 查询单词
                var tmp = id_inputWord.find(editWrod);
                if ((tmp === -1) || (id_inputwordList.get(tmp).value === "0")) { //列表中无新编辑项
                    id_inputwordList.insert(0, { text: editWrod, value: "1", input: editWrod});
                    id_inputWord.currentIndex = id_inputWord.find(editWrod);
                }
                if (id_inputWord.currentIndex == id_inputwordList.count-1){ //当前要显示的是最后一项
                    id_inputWord.textRole = "input";
                    return ;
                } else {
                    id_inputWord.textRole = "text";
                }
                id_displaySearchWord.text = editWrod;
                searchWord(editWrod);
            }
            function searchWord(word) { //设置URL, 查传入的word单词
                var apikey, url;
                apikey = "uXoindbgL9Hf3HkfWfHOTtz8";
                url = "http://openapi.baidu.com/public/2.0/translate/dict/simple";
                id_translation.setApiKey(apikey);   //设置 ApiKey
                id_translation.setUrl(url); //设置 URL
                console.log(word, id_translation.from, id_translation.to);
                id_translation.setRequest(word); //要查的单词
            }
            Connections {
                target: id_translation;
                onSig_destWordMsg: {
                    id_displayWordPh.text = phMsg;
                    id_outputWordMeans.text = "";
                    if (size == 0) {
                        id_outputWordMeans.text = "无查询结果.";
                        return;
                    }
                    for (var i=0; i<size; ++i) {
                        console.log(means[i]);
                        id_outputWordMeans.text += means[i];
                    }
                }
            }
        }
    }
}
